import React, { Component } from 'react'
import Footer from "@/components/Footer"
import { gerGoodsApi } from "@/api/goods"
import { NavBar, SearchBar, Tabs } from 'antd-mobile'
import { withRouter } from "react-router-dom";
import style from "./index.module.scss"
import qs from "query-string"
class index extends Component {
  state = {
    goodArr: [],
    salesArr: {},
    Tabslist: [
      {
        key: 0,
        title: "综合"
      },
      {
        key: 1,
        title: "销量"
      },
      {
        key: 2,
        title: "新品"
      },
      {
        key: 3,
        title: "价格"
      },
      {
        key: 4,
        title: "筛选"
      }
    ]
  }
  componentDidMount() {
    console.log("id", qs.parse(this.props.location.search).id);
    this.gerGoods()
  }
  onBack = () => {
    this.props.history.go(-1)
  }
  async gerGoods() {
    let res = await gerGoodsApi({
      id: qs.parse(this.props.location.search).id
    })
    if (res.data.code == 200) {
      this.setState({
        goodArr: res.data.list,
        salesArr: res.data.list.salesPrice,
      })
    }
  }
  goDoodsAll=(res)=>{
    this.props.history.push({pathname:"/Details",search:`?id=${res}`})
    // console.log(111);
  }
 
  render() {
    return (
      <div className={style.goodsAll}>
        <div className={style.top}>
          <NavBar onBack={this.onBack}>全部商品</NavBar>
          <SearchBar className={style.SearchBar}
            placeholder='请输入内容'
            style={{ '--background': '#ffffff' }}
          />
          <Tabs>
            {this.state.Tabslist.map(item => (
              <Tabs.Tab title={item.title} key={item.key} activeKey={item.key}>
              </Tabs.Tab>
            ))}
          </Tabs>
          <ul className={style.listul}>
            {this.state.goodArr.map(item => (
              <li key={item.id} className={style.listli} onClick={()=>this.goDoodsAll(item.id)}>
                <img src={item.pic}  />
                <h4>{item.name}</h4>
                <h5>原价¥<span>{item.salesPrice.value}</span></h5>
                <p> 活动价¥<span>{item.salesPrice.value }</span></p>
              </li>
            ))}
          </ul>
        </div>
        <div className={style.bottom}>
          <Footer></Footer>
        </div>
      </div>
    )
  }
}
export default withRouter(index)